<template>
  <div class="sign">
    <el-dialog
      title="请输入密码："
      :visible.sync="dialogVisible"
      width="30%"
      height="100px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :showClose="false"
    >
      <el-input
        placeholder="请输入管理密码"
        v-model="input"
        show-password
        clearable
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button class="button" type="primary" @click="submitpassword"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <img src="@/assets/1.png" alt="" />
    <div id="main"></div>
    <el-input
      class="input"
      placeholder="请输入学号"
      v-model="studentId"
      clearable
      maxlength="10"
      show-word-limit
    >
    </el-input>
    <el-row>
      <el-button type="primary" round plain @click="signIn">点击签到</el-button>
      <el-button type="danger" round plain @click="signOut">点击签退</el-button>
    </el-row>
  </div>
</template>

<script>
import { signIn as signInApi } from "@/api";
import { signOut as signOutApi } from "@/api";
export default {
  data() {
    return {
      studentId: "",
      nowTime: "",
      dialogVisible: true,
      input: "",
      server: "无服务",
    };
  },
  created() {
    const server = this.server;
    this.$emit("fatherMethod", server);
  },
  mounted() {
    window.addEventListener("keydown", this.keyDown);
    this.dealWithTime(new Date());
    this.timer = setInterval(() => {
      this.dealWithTime(new Date());
    }, 500);
  },
  destroyed() {
    if (this.timer) {
      // 注意在vue实例销毁前，清除我们的定时器
      clearInterval(this.timer);
    }
  },
  methods: {
    signIn() {
      const params = {
        studentId: this.studentId,
      };
      signInApi(params).then(({ msg, code, server }) => {
        if (code == 201) {
          this.$message.success(msg);
          this.$emit("fatherMethod", server);
        } else {
          this.$message.error(msg);
          this.$emit("fatherMethod", server);
        }
      });
    },
    async signOut() {
      const params = {
        studentId: this.studentId,
      };
      await signOutApi(params).then(({ msg, code, server }) => {
        if (code == 201) {
          this.$message.success(msg);
          this.$emit("fatherMethod", server);
        } else {
          this.$message.error(msg);
          this.$emit("fatherMethod", server);
        }
      });
    },
    submitpassword() {
      if (this.input === "ssssttttxxxx") {
        this.dialogVisible = false;
        this.$emit("fatherMethods");
      } else {
        this.$message({
          message: "密码错误，请重新输入",
          type: "error",
        });
        this.input = "";
      }
      this.destroyed();
    },
    dealWithTime(data) {
      let H = data.getHours();
      let Min = data.getMinutes();
      let S = data.getSeconds();
      H = H < 10 ? "0" + H : H;
      Min = Min < 10 ? "0" + Min : Min;
      S = S < 10 ? "0" + S : S;
      this.nowTime = H + " : " + Min + " : " + S;
      var Tools = document.getElementById("main");
      Tools.innerHTML = this.nowTime;
    },
    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        this.submitpassword();
        return false;
      }
    },
    destroyed() {
      window.removeEventListener("keydown", this.keyDown, false);
    },
  },
};
</script>

<style lang="scss" scoped>
.sign {
  height: 700px;
  img {
    width: 60em;
  }
  #main {
    font-size: 43px;
    margin-top: -4.6em;
    margin-left: -15em;
  }
  .input {
    width: 28%;
    margin: 14em 0 5em 0;
    /deep/ .el-input__inner {
      border-color: rgb(179, 192, 209);
      border-radius: 16px;
      font-size: 16px;
      height: 2.8em;
    }
  }
  .el-button {
    margin: 0 2em;
  }
  .button {
    margin: 0 0.5em;
  }
}
</style>
